<template>
	<view class="wrap">
		<view class="nav">
			<view :class="['item', navIndex == 1 ? 'active' : '']" @click="navIndex = 1">综合排序</view>
			<view :class="['item', navIndex == 2 ? 'active' : '']" @click="navIndex = 2">销量</view>
			<view :class="['item', navIndex == 3 ? 'active' : '']" @click="navIndex = 3">价格</view>
		</view>
		<view class="content">
			<u-empty v-if="goodsList.length == 0" text="暂无商品"></u-empty>
			<view class="list">
				<view class="item" v-for="(item,index) in goodsList" :key="index"
					@tap="routerTo(`/pageB/goodDetail?id=${item.id}`)">
					<view class="left">
						<!-- #ifdef MP-WEIXIN -->
						<image lazy-load :src="item.image" mode=""></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<easy-loadimage class="image" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
						<!-- #endif -->
					</view>
					<view class="right">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥{{item.member_price}} <text
								style="font-size: 12px;text-decoration: line-through;margin-left: 5px;">￥{{item.original_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '@/api/index.js'
	export default{
		data(){
			return{
				navIndex: 1,
				goodsList: [],
				data: {
					field: 'is_recom',
					page: 1,
					page_size: 10
				},
				last_page: ''
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			getList() {
				if (this.data.page == 1) {
					this.goodsList = []
				}
				list(this.data).then(res => {
					if (res.code == 1) {
						this.last_page = res.data.last_page
						res.data.data.forEach(item => {
							this.goodsList.push(item)
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #f6f6f6;
		box-sizing: border-box;
		
		.nav {
			padding: 24rpx 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			.item {
				font-size: 24rpx;
				color: #696969;
				font-weight: 500;
			}
			
			.active {
				color: #EA504F;
				font-weight: bold;
			}
		}
		
		.content {
			padding: 24rpx;
			box-sizing: border-box;
			
			.list {
				padding:10rpx 0;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 24rpx;
				box-sizing: border-box;
			
				.item {
					flex: 1;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					border-radius: 5rpx;
					margin-bottom: 24rpx;
					box-sizing: border-box;
					overflow: hidden;
			
					.left {
						width: 100%;
			
						.image {
							width: 100%;
							height: 220rpx;
							border-radius: 8rpx;
						}
						image {
							width: 100%;
							height: 220rpx;
							border-radius: 8rpx;
						}
					}
			
					.right {
						width: 100%;
						display: flex;
						flex-direction: column;
						color: #000;
						padding: 24rpx;
						height: fit-content;
						justify-content: space-around;
						box-sizing: border-box;
			
						.name {
							font-size: 26rpx;
							font-weight: 700;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 24rpx;
						}
			
						.price {
							font-size: 30rpx;
							color: #EA504F;
						}
					}
				}
			}
		}
	}
</style>